import { useState, useRef } from "react";

// prop-types is a library for typechecking of props.
import PropTypes from "prop-types";
// @mui material components
import Container from "@mui/material/Container";
import Icon from "@mui/material/Icon";
// Soft UI Dashboard PRO React components
import SoftBox from "components/SoftBox";
import SoftTypography from "components/SoftTypography";
import SoftButton from "components/SoftButton";
import logo from "assets/icon/signalLogo.png";
import SelectPlanModal from "pages/BuyPlan/SelectPlan";

function LoginNavbar({ transparent, light, action }) {
  const selectPlanModalRef = useRef();
  const openModal = () => {
    selectPlanModalRef.current.openModal();
  };
  return (
    <Container>
      <SoftBox
        py={1}
        px={{ xs: transparent ? 4 : 5, sm: transparent ? 2 : 5, lg: transparent ? 0 : 5 }}
        my={2}
        mx={3}
        width="calc(100% - 48px)"
        borderRadius="section"
        shadow={transparent ? "none" : "md"}
        color={light ? "white" : "dark"}
        display="flex"
        justifyContent="space-between"
        alignItems="center"
        position="absolute"
        left={0}
        zIndex={3}
        sx={({ palette: { transparent: transparentColor, white }, functions: { rgba } }) => ({
          backgroundColor: transparent ? transparentColor.main : rgba(white.main, 0.8),
          backdropFilter: transparent ? "none" : `saturate(200%) blur(30px)`,
        })}
      >
        <SoftBox py={transparent ? 1.5 : 0.75} lineHeight={1}>
          {/* <SoftTypography variant="button" fontWeight="bold" color={light ? "white" : "dark"}>
            alserserae
          </SoftTypography> */}
          <img src={logo} alt="logo" width="174px" height="24px" />
        </SoftBox>
        <SoftBox display={{ xs: "none", lg: "inline-block" }}>
          <SoftButton
            component="button"
            variant="gradient"
            color="info"
            size="small"
            circular
            onClick={openModal}
          >
            Subscribe Now
          </SoftButton>
        </SoftBox>
        <SelectPlanModal ref={selectPlanModalRef} />
      </SoftBox>
    </Container>
  );
}

// Setting default values for the props of DefaultNavbar
LoginNavbar.defaultProps = {
  transparent: false,
  light: false,
  action: false,
};

// Typechecking props for the DefaultNavbar
LoginNavbar.propTypes = {
  transparent: PropTypes.bool,
  light: PropTypes.bool,
  action: PropTypes.oneOfType([
    PropTypes.bool,
    PropTypes.shape({
      color: PropTypes.oneOf([
        "primary",
        "secondary",
        "info",
        "success",
        "warning",
        "error",
        "dark",
        "light",
      ]),
      label: PropTypes.string.isRequired,
    }),
  ]),
};

export default LoginNavbar;
